來用HTML5的Canvas畫畫了^^

使用者操作需求

在畫布上用滑鼠繪製色彩粗細會自動變化的線條～

重點記錄

主要是canvas的繪圖步驟

1. 定義線條樣式
   (1) strokeStyle線條顏色
   (2) lineWidth線條寬度
   (3) lineJoin線條的轉角樣式
   (4) lineCap線條的頭與尾巴樣式

2. 移動順序
   (1) beginPath()開啟一個新的繪製路徑
   (如果要繪製多個圖形指令都介於beginPath()－closePath())
   (2) moveTo()將繪製路徑的起點移動到指定的座標中
   (3) lineTo()連接路徑終點到指定的座標中
   (4) stroke()繪製路徑

流程步驟

1. 在HTML加入<canvas>標籤，可先預設寬高

<!-- 一開始的預設畫布 -->
<canvas id="draw" width="800" height="800"></canvas>

2. 將畫布撐滿，並且設置變數ctx為canvas的操作元素

getContext() 指定要在畫布上繪製的類型，繪製2D輸入‘2d’，3D輸入'3d'

const canvas = document.querySelector('#draw');

// 將畫布寬高撐滿至視窗大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 設定繪圖環境為2d
const ctx = canvas.getContext('2d');

3. 設定待一開始預設的變數

// *繪圖環境 樣式設定*
ctx.strokeStyle = '#BADA55'; // 預設線條顏色
ctx.lineJoin = 'round';      // 線條轉角樣式 https://goo.gl/XntWW9
ctx.lineCap = 'round';       // 線條頭與尾巴樣式 https://goo.gl/82GrwJ

let isDrawing = false; // 用於判斷是否執行畫圖
let lastX = 0;         // 起始點X
let lastY = 0;         // 起始點Y
let hue = 0;           // 預設初始顏色
let direction = false; // 判斷粗細增減用

4. 增加滑鼠監聽

控制滑鼠是否可以執行畫畫

// 當滑鼠按下時，isDrawing轉為true，並將初始點設為滑鼠點下的位置
canvas.addEventListener('mousedown', (e)=> {
    isDrawing = true;
    [ lastX, lastY ] = [ e.offsetX, e.offsetY ]
  });
  
// 當滑鼠移動時，執行function draw
canvas.addEventListener('mousemove', draw);

// 當滑鼠放開或離開畫面時，isDrawing轉為false，不執行function draw
canvas.addEventListener('mouseup', ()=> isDrawing = false);
canvas.addEventListener('mouseout', ()=> isDrawing = false);

5. 繪製function draw()

function draw (e) {

  // 檢查isDrawing是否為true，不是的話停止執行function
  if(!isDrawing) return;
  
  // 設定線條顏色為hsl吃變數hue，可以去移動數值看看色彩的變化 https://goo.gl/QxMkn
  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
  ctx.beginPath();                  // 起始畫圖路徑
  ctx.moveTo(lastX, lastY);         // 路徑起始點
  ctx.lineTo(e.offsetX, e.offsetY); // 將起始點與目前滑鼠位置的X、Y用線條連接起來
  ctx.stroke();                     // 將線條繪製出來
  [ lastX, lastY ] = [ e.offsetX, e.offsetY ]  // 打結束點放入lastX,lastY
  
  // 顏色變幻效果
  // 0為紅色轉一圈到360紅色後就把變數hue變回0繼續繞圈
  hue ++;
  if(hue >= 360){
    hue = 0;
  }

  // 線條粗細變換效果
  // 利用轉換direction的false,true來做線條的＋＋跟－－
  if(ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
    direction = !direction;
  }
  if(direction) {
    ctx.lineWidth++;
  } else {
    ctx.lineWidth--;
  }
}